<template>
	<!--common/components/selectPopup/selectPopup.wxml-->
	<!-- 已选择弹窗 -->

	<fui-bottom-popup :show="visible" @close="onClose">
		<view class="body">
			<fui-row class="body-header">
				<fui-col class="info" :span="20">
					<text>已选</text>
					<text> ({{count}}) </text>
				</fui-col>
				<fui-col :span="4" class="icon">
					<fui-icon name="arrowdown" color="#1c1c1c" size="48" @click="onAway">
					</fui-icon>
				</fui-col>
			</fui-row>
			<view class="content">
				<fui-list-cell v-for="(sub,subIndex) in list" :key="subIndex">
					<fui-text :text="sub.label"></fui-text>
					<fui-button background="#fff" width="88rpx" size="28" height="56rpx" color="#000000"
						borderColor="#DCDCDC" @tap="onRemove(subIndex)">
						移除
					</fui-button>
				</fui-list-cell>

			</view>
		</view>
	</fui-bottom-popup>

</template>

<script>
	import {
		mapState,
		mapActions
	} from 'pinia'
	import {
		useDeptStore
	} from '../../../store/modules/dept'
	import {
		keyArrLength
	} from '../../../utils/util'
	import _ from 'lodash'
	export default {
		props: {
			visible: Boolean,
			data: {
				type: Object,
				default: () => {},

			}
		},
		data() {
			return {}
		},

		computed: {
			count() {
				return this.data.length
			},

			list() {
				console.log(this.data);
				if (this.data.length) {

					return _.map(this.data, item => JSON.parse(item))
				}
				return []
			}
		},
		emits: ['remove', 'close'],
		methods: {
			...mapActions(useDeptStore, ['onRemovePopupListData']),
			onAway() {
				this.$emit('close', false)
			},
			onClose() {
				this.$emit('close', false)
			},

			onRemove(index) {
				this.$emit('remove', index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* common/components/selectPopup/selectPopup.wxss */

	.header {}

	.t-root {
		// --td-popup-bg-color: #f0f2f5;
	}

	.t-content {}

	.body {
		height: 90vh;
		display: flex;
		flex-direction: column;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		overflow: hidden;

		&-header {
			background-color: #fff;
			padding: 32rpx;

			.info {
				font-size: 36rpx;
				font-weight: 600;
				color: rgba(0, 0, 0, 0.9);
			}

			.icon {
				display: flex;
				justify-content: flex-end;
			}
		}
	}

	.content {
		&-list {
			&+& {
				margin-top: 16rpx;
			}
		}
	}
</style>